/**
 * @Author wywinstonwy
 * @Date 2022/1/1 10:33 下午
 * @Description:
 */
import 'dart:math';

import 'package:demo202112/utils/common_appbar.dart';
import "package:flutter/material.dart";

class MyClip extends StatefulWidget {
  const MyClip({Key? key}) : super(key: key);

  @override
  _MyClipState createState() => _MyClipState();
}

class _MyClipState extends State<MyClip> {
  Image _image =Image.network('https://img2.baidu.com/it/u=1974206649,3691483036&fm=26&fmt=auto',fit: BoxFit.cover,);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar('Clips'),
      body: Container(
        margin: EdgeInsets.all(20),
        color: Colors.amberAccent,
        child: StartClip(),
        ),

    );
  }

  _buildClipRect() {
    return ClipRect(
      clipBehavior: Clip.antiAlias,
      child: Align(
        alignment: Alignment.bottomCenter,
        heightFactor: 0.5,
        child: Container(
          height: 300,
          width: 300,
          child: Image.network('https://img2.baidu.com/it/u=1974206649,3691483036&fm=26&fmt=auto',fit: BoxFit.cover,),
        ),
      ),
    );
  }
  _buildClipRRect(){
    return ClipRRect(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
        bottomLeft: Radius.circular(20),
        topRight: Radius.circular(40),
        bottomRight:Radius.circular(80)

      ),
      child: Container(
        height: 300,
        width: 300,
        child:Image.network('https://img2.baidu.com/it/u=1974206649,3691483036&fm=26&fmt=auto',fit: BoxFit.cover,) ,
      ),
    );
  }
  _buildClipOval(){
    return ClipOval(
      child: Container(
        height: 200,
        width: 300,
        child: _image,
      ),
    );
  }
  _buildClipPath(){
    return ClipPath.shape(
      child: Container(
        height: 200,
        width: 200,
        child: _image,
      ),
      shape: BeveledRectangleBorder(),
    );
  }
  _buildClipCustom1(){
    return Center(
          child: ClipPath(
            clipper: TrianglePath(),
            child: Container(
              height: 300,
              width: 300,
              child: _image,
            ),
          ),
    );
  }
}

class MyClippper extends CustomClipper<Path>{
  Path path =Path();

  @override
  Path getClip(Size size) {
    Path path = Path();
    // 从 60，0 开始
    path.moveTo(60, 0);
    // 二阶贝塞尔曲线画弧
    path.quadraticBezierTo(0, 0, 0, 60);
    // 连接到底部
    path.lineTo(0, size.height / 1.2);
    // 三阶贝塞尔曲线画弧
    path.cubicTo(size.width / 4, size.height, size.width / 4 * 3, size.height / 1.5, size.width, size.height / 1.2);
    // 再连接回去
    path.lineTo(size.width, 60);
    // 再用二阶贝塞尔曲线画弧
    path.quadraticBezierTo(size.width - 60, 60, size.width - 60, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
    // TODO: implement shouldReclip
  }
  
}

class StarPath extends CustomClipper<Path> {
  StarPath({this.scale = 2.5});

  final double scale;

  double perDegree = 36;

  /// 角度转弧度公式
  double degree2Radian(double degree) {
    return (pi * degree / 180);
  }

  @override
  Path getClip(Size size) {
    var R = min(size.width / 2, size.height / 2);
    var r = R / scale;
    var x = size.width / 2;
    var y = size.height / 2;

    var path = Path();
    path.moveTo(x, y - R);
    path.lineTo(x - sin(degree2Radian(perDegree)) * r,
        y - cos(degree2Radian(perDegree)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R,
        y - cos(degree2Radian(perDegree * 2)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r,
        y - cos(degree2Radian(perDegree * 3)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R,
        y - cos(degree2Radian(perDegree * 4)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r,
        y - cos(degree2Radian(perDegree * 5)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R,
        y - cos(degree2Radian(perDegree * 6)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r,
        y - cos(degree2Radian(perDegree * 7)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R,
        y - cos(degree2Radian(perDegree * 8)) * R);
    path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r,
        y - cos(degree2Radian(perDegree * 9)) * r);
    path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R,
        y - cos(degree2Radian(perDegree * 10)) * R);
    return path;
  }

  @override
  bool shouldReclip(StarPath oldClipper) {
    return oldClipper.scale != this.scale;
  }
}
class TrianglePath extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width/2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class StartClip extends StatefulWidget {
  const StartClip({Key? key}) : super(key: key);

  @override
  _StartClipState createState() => _StartClipState();
}

class _StartClipState extends State<StartClip> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(vsync: this,duration: Duration(seconds: 2))
    ..addStatusListener((status) {
      if(status == AnimationStatus.completed){
        _controller.reverse();
      }else if(status == AnimationStatus.dismissed){
        _controller.forward();
      }
    });
    _animation = Tween(begin: 0.1,end: 1.0).animate(_controller);
    _controller.forward();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        builder: (context,child){
          return ClipPath(
            clipper: StarPath(scale: _animation.value),
            child: Container(
              height: 300,
              width: 300,
              color: Colors.red,
            ),
          );
        },
        animation: _animation,
      ),
    );
  }
}
